<route lang="json5">
	{
	needLogin: true,
	style: {
	navigationStyle: 'custom',
	navigationBarTitleText: '我的',
	},
	}
</route>

<script lang="ts" setup>
	import { method } from 'lodash-es'
	import { setPermissionsInform } from '@/service/common/permissionCheck'
	import { aggregateApi } from '@/service/my'
	import { useUserStore } from '@/store'

	// defineOptions({
	//   name: 'Home',
	// })

	// const state = reactive({
	//   tabbar: 1,
	// })

	// 获取屏幕边界到安全区域距离
	const { safeAreaInsets } = uni.getSystemInfoSync()
	// 用户信息
	const userStore = useUserStore()

	// 课程列表数据
	const aggregateData = ref<any>({
		studentNum: '',
		classNum: '',
	})

	onLoad(() => {
		console.log('进入我的')
		// 设置手机通知权限
		setPermissionsInform()
		// 请求学习时长
		getStudyReportUrl()
	})

	// 获取学习报告
	async function getStudyReportUrl() {
		const res : any = await aggregateApi()
		if (res?.code === 200) {
			aggregateData.value = res.data
		} else {
			console.error('获取学习报告失败:', res.msg)
		}
	}
</script>
<template>
	<view class="main_container_bg">
		<!-- 标题栏 -->
		<!-- <view class="my_title_container">
      <navigator url="/pages/my/setting" open-type="navigate" hover-class="navigator-hover">
        <wd-icon name="/static/images/my/setting_icon.png" size="22" />
      </navigator>

      <navigator url="/pages/my/message/notice" open-type="navigate" hover-class="navigator-hover">
        <wd-badge is-dot top="3" right="8">
          <wd-icon
            name="/static/images/my/message_icon.png"
            size="22"
            style="margin-right: 10rpx; margin-left: 10rpx"
          />
        </wd-badge>
      </navigator>
    </view> -->
		<navigator url="/pages/my/info" open-type="navigate" hover-class="none" style="margin-top: 100rpx">
			<!-- 头像 -->
			<view class="avatar_container">
				<wd-img :width="60" :height="60" round :src="
            userStore.userInfo.headshot ? userStore.userInfo.headshot : '/static/images/comment/default_user.png'
          " />
				<view style="display: flex; flex-direction: column; margin-left: 20rpx;">
					<wd-text :text="userStore.userInfo.nickName" color="#3D3D3D" size="14px"
						style=" font-weight: bold" />

					<wd-text :text="userStore.userInfo.schoolName" color="#999999" size="12px"
						style="margin-top: 15rpx;" />
				</view>
			</view>
		</navigator>
		<!-- 学习报告 -->
		<view class="learn_report_container">
			<!-- 学习时长记录 -->
			<view class="learn_record_container">
				<view class="learn_record_item">
					<view class="learn_record_text">
						<view class="font-bold">
							{{ aggregateData.studentNum }}
						</view>
					</view>
					<text class="report_title">学生人数</text>
				</view>
				<view class="learn_record_item">
					<view class="learn_record_item">
						<view class="learn_record_text">
							<view class="font-bold">{{ aggregateData.courseNum }}</view>
						</view>
						<text class="report_title">课程数量</text>
					</view>
				</view>
			</view>

			<wd-cell-group custom-class="menu_container" border>
				<!-- 我的考试 -->
				<wd-cell is-link to="/pages/my/exam/list" size="large">
					<template #title>
						<view class="cell-title">我的考试</view>
					</template>
				</wd-cell>

				<!-- 班级管理 -->
				<wd-cell is-link to="/pages/my/class/index" size="large">
					<template #title>
						<view class="cell-title">班级管理</view>
					</template>
				</wd-cell>

				<!-- 学校公告 -->
				<wd-cell is-link to="/pages/my/message/notice" size="large">
					<template #title>
						<view class="cell-title">学校公告</view>
					</template>
				</wd-cell>
				<!-- 系统设置 -->
				<wd-cell is-link to="/pages/my/setting" size="large">
					<template #title>
						<view class="cell-title">系统设置</view>
					</template>
				</wd-cell>
			</wd-cell-group>
		</view>
	</view>
</template>

<style scoped>
	.main_container_bg {
		display: flex;
		flex-direction: column;
		background-image: linear-gradient(to bottom, #e0eaff, #f7f2f2);
	}

	.cell-title {
		font-size: 28rpx;
	}

	.navbar_class {
		color: #b3f0d9;
		background-color: #b3f0d9;
	}

	.title_container {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 80rpx;
		padding-right: 20rpx;
	}

	.my_title_container {
		display: flex;
		justify-content: flex-end;
		padding-top: 80rpx;
		padding-right: 20rpx;
	}

	.avatar_container {
		display: flex;
		align-items: center;
		margin-left: 25rpx;
	}

	.font_black_12 {
		font-size: 12px;
		color: black;
	}

	.font_black_bold_12 {
		font-size: 12px;
		font-weight: bold;
		color: black;
	}

	.font_grey_12 {
		font-size: 12px;
		color: darkgrey;
	}

	.learn_report_container {
		display: flex;
		flex-direction: column;
		margin-top: 25rpx;
	}

	.learn_record_text {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.learn_record_container {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.learn_record_item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 50%;
		height: 150rpx;
		margin-left: 20rpx;
		background-color: white;
		border-radius: 5rpx;
	}

	.report_title {
		margin-top: 10rpx;
		font-size: 24rpx;
		color: black;
	}

	.font_gray {
		font-size: 20rpx;
		color: #999999;
	}

	.menu_container {
		margin: 20rpx;
		border-radius: 10rpx;
	}
</style>